<template>
  <h1>隐藏显示命令</h1>

  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <p>王五</p>

  <!-- v-if 的值交给isShow响应式变量来控制 v-else 是 v-if 取反 -->
  <p v-if="isShow">月亮</p>
  <p v-if="isShow">星星</p>
  <p v-else>太阳</p>
  <hr>
  <!-- v-if 是直接在html代码中删除元素
       v-show 是修改元素的CSS属性display值为none 不会频繁删除创建元素 开销较小
   -->
  <p v-if="false">小红</p>
  <p v-show="false">小绿</p>
</template>

<script setup>

  import {ref} from "vue";

  const isShow = ref(true)

</script>

<style scoped>

</style>